<template>
    <ul class="right-list-container">
        <li v-for="(item, i) in list" :key="i">
            <span :class="{
                active: item.isSelect
            }" @click="() => handleClick(item)">{{ item.name }}</span>
            <span :class="{
                active: item.isSelect
            }" v-if="item.category" class="articleCount" @click="() => handleClick(item)">{{
    item.articleCount }}篇</span>
            <component v-if="item.children" :is="$options.name" :list="item.children" :handleClick="handleClick" />
        </li>
    </ul>
</template>

<script >
export default {
    name: "RightLists",
    props: ['list', 'handleClick'],
    setup(props) {
        return {
            ...props
        }
    }
}
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.right-list-container {
    width: 100%;
    height: 100%;
    padding: 0px;

    .right-list-container {
        margin-left: 1em;
    }

    li {
        min-height: 45px;
        line-height: 45px;
        cursor: pointer;
        color: @words;
        font-size: 15px;

        .active {
            color: @warn;
            font-weight: bold;
        }
    }
}

.articleCount {
    font-size: 12px;
    margin-left: 1em;
    color: @gray;
}
</style>